<template>
  <div class="container">
    <a-breadcrumb>
      <a-breadcrumb-item>
        <icon-home />
      </a-breadcrumb-item>
      <a-breadcrumb-item>控制面板</a-breadcrumb-item>
      <a-breadcrumb-item>应用维护</a-breadcrumb-item>
    </a-breadcrumb>
    <a-card title="应用维护">
      <a-row>
        <a-col :flex="1">
          <a-form :model="formModel" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }"
            label-align="left">
            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item label="应用代码">
                  <a-input v-model="formModel.applicationCode" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="应用名称">
                  <a-input v-model="formModel.applicationName" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="应用分组">
                  <a-input v-model="formModel.applicationGroup" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
        <a-divider style="height: 32px" direction="vertical" />
        <a-col :flex="'86px'" style="text-align: right">
          <a-space direction="vertical" :size="18">
            <a-button type="primary" @click="search">
              <template #icon><icon-search /></template>搜索
            </a-button>
          </a-space>
        </a-col>
      </a-row>

      <a-divider style="margin-top: 0" />
      <a-row style="margin-bottom: 16px">
        <a-col :span="12">
          <a-space>
            <a-button type="primary" @click="addNew">
              <template #icon>
                <icon-plus />
              </template>
              新建
            </a-button>
          </a-space>
        </a-col>
        <a-col :span="12" class="btn-right-col"> </a-col>
      </a-row>

      <a-table row-key="applicationId" :loading="loading" :pagination="pagination" :columns="columns" :data="renderData"
        :bordered="false" :size="'medium'" @page-change="onPageChange">
        <template #enable="{ record }">
          <a-switch v-model="record.enabled" disabled />
        </template>
        <template #operations="{ record }">
          <span>
            <icon-eye @click="btnView(record)" />&nbsp;
            <icon-edit @click="btnEdit(record)" />&nbsp;
            <icon-delete @click="btnDelete(record, fetchData)" />
          </span>
        </template>
      </a-table>
    </a-card>

    <a-modal :visible="modalType > 0" modal-class="big" :footer="modalType > 1" @ok="btnEditSave(fetchData)"
      @cancel="modalType = 0">
      <template #title>
        应用程序详情 <div v-if="currRecord.applicationId">&nbsp;#{{ currRecord.applicationId }}</div>
      </template>
      <a-form :model="currRecord" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }" label-align="right"
        :disabled="modalType == 1">
        <a-form-item label="应用代码" required>
          <a-input v-model="currRecord.applicationCode" />
        </a-form-item>
        <a-form-item label="应用名称" required>
          <a-input v-model="currRecord.applicationName" />
        </a-form-item>
        <a-form-item label="应用分组">
          <a-input v-model="currRecord.applicationGroup" />
        </a-form-item>
        <a-form-item label="安全令牌">
          <a-input v-model="currRecord.secretKey" />
        </a-form-item>
        <a-form-item label="备注">
          <a-textarea v-model="currRecord.remark" />
        </a-form-item>
        <a-form-item label="是否可用">
          <a-switch v-model="currRecord.enabled" />
        </a-form-item>
        <a-form-item label="创建时间">
          <span>{{ currRecord.creationTime }}</span>
        </a-form-item>
        <a-form-item label="创建人">
          <span>{{ currRecord.creatorName }}</span>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { formatTime, getPostData } from '@/utils';
import useLoading from '@/hooks/loading';
import type {
  TableColumnData,
  TableData,
} from '@arco-design/web-vue/es/table/interface';
import { getList } from '@/api/dashboard/apps';
import { formModel, pagination, columns } from './const';
import {
  modalType,
  currRecord,
  btnView,
  btnEdit,
  btnEditSave,
  btnDelete,
  addNew,
} from './event';

const { loading, setLoading } = useLoading(true);

const renderData = ref<TableData[]>();

const search = () => {
  pagination.current = 1;
  fetchData();
};

const onPageChange = (current: number) => {
  pagination.current = current;
  fetchData();
};

const fetchData = async () => {
  let pdata = getPostData(pagination, formModel.value, 'applicationId');
  setLoading(true);
  const data = await getList(pdata);
  pagination.total = data.totalCount;
  renderData.value = data.items;
  setLoading(false);
};

fetchData();
</script>
